<template>
  <div>
    <div>
      <div v-for="(config,index) in testData" :key="index" style="display:flex;align-items: center;height: 30px">
        <span>{{city[index]}}</span>
        <svg-test :config="config"></svg-test>
      </div>

      <div style="height: 200px;display: flex;">
        <div v-for="(config,index) in testData1" :key="index" style="height: 100%;flex: 1;margin-left: 15px;position: relative">
          <svg-test :config="config" style="position: absolute;bottom: 20px"></svg-test>
          <span style="position: absolute;bottom: 0">{{city[index]}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import SvgTest from './SvgTest'

  export default {
    name: 'Main',
    components: {
      SvgTest
    },
    data() {
      return {
        config: {
          color: '#f5ef42',
          width: '60%',
          height: '15'
        },
        testData: [{
          color: '#f5ef42',
          width: '20%',
          height: '15'
        }, {
          color: '#42f575',
          width: '40%',
          height: '15'
        }, {
          color: '#41eefa',
          width: '60%',
          height: '15'
        },{
          color: '#312fad',
          width: '80%',
          height: '15'
        },{
          color: '#ad2f70',
          width: '100%',
          height: '15'
        }],
        city:['四川','武汉','重庆','北京','西藏'],
        testData1: [{
          color: '#f5ef42',
          width: '20',
          height: '100'
        }, {
          color: '#42f575',
          width: '20',
          height: '80'
        }, {
          color: '#41eefa',
          width: '20',
          height: '60'
        },{
          color: '#312fad',
          width: '20',
          height: '40'
        },{
          color: '#ad2f70',
          width: '20',
          height: '20'
        }]
      }
    }
  }
</script>
